<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{badge && badge.name}}</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="badgeLoaded" (ionRefresh)="refreshBadges($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="badgeLoaded">

        <ion-item-group *ngIf="badge">
            <ion-item text-wrap class="item-avatar-center">
                <img *ngIf="badge.badgeurl" class="avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name">
                <ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
                    {{ 'addon.badges.expired' | translate }}
                </ion-badge>
            </ion-item>
        </ion-item-group>

        <ion-item-group *ngIf="user.fullname">
            <ion-item-divider>
                <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap>
                <h2>{{ 'core.name' | translate}}</h2>
                <p>{{ user.fullname }}</p>
            </ion-item>
        </ion-item-group>

        <ion-item-group *ngIf="badge">
            <ion-item-divider>
                <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap *ngIf="badge.issuername">
                <h2>{{ 'addon.badges.issuername' | translate}}</h2>
                <p>{{ badge.issuername }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.issuercontact">
                <h2>{{ 'addon.badges.contact' | translate}}</h2>
                <p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no">
                    {{ badge.issuercontact }}
                </a></p>
            </ion-item>
        </ion-item-group>

        <ion-item-group *ngIf="badge">
            <ion-item-divider>
                <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap *ngIf="badge.name">
                <h2>{{ 'core.name' | translate}}</h2>
                <p>{{ badge.name }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.version">
                <h2>{{ 'addon.badges.version' | translate}}</h2>
                <p>{{ badge.version }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.language">
                <h2>{{ 'addon.badges.language' | translate}}</h2>
                <p>{{ badge.language }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.description">
                <h2>{{ 'core.description' | translate}}</h2>
                <p>{{ badge.description }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.imageauthorname">
                <h2>{{ 'addon.badges.imageauthorname' | translate}}</h2>
                <p>{{ badge.imageauthorname }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.imageauthoremail">
                <h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
                <p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no">
                    {{ badge.imageauthoremail }}
                </a></p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.imageauthorurl">
                <h2>{{ 'addon.badges.imageauthorurl' | translate}}</h2>
                <p><a [href]="badge.imageauthorurl" core-link auto-login="no">
                    {{ badge.imageauthorurl }}
                </a></p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.imagecaption">
                <h2>{{ 'addon.badges.imagecaption' | translate}}</h2>
                <p>{{ badge.imagecaption }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="course.fullname">
                <h2>{{ 'core.course' | translate}}</h2>
                <p>
                    <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId"></core-format-text>
                </p>
            </ion-item>
            <!-- Criteria (not yet avalaible) -->
        </ion-item-group>

        <ion-item-group *ngIf="badge">
            <ion-item-divider>
                <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap *ngIf="badge.dateissued">
                <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
                <p>{{badge.dateissued * 1000 | coreFormatDate }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.dateexpire">
                <h2>{{ 'addon.badges.expirydate' | translate}}</h2>
                <p>
                    {{ badge.dateexpire * 1000 | coreFormatDate }}
                    <span class="text-danger" *ngIf="currentTime >= badge.dateexpire">
                        {{ 'addon.badges.warnexpired' | translate }}
                    </span>
                </p>
            </ion-item>
            <!-- Evidence (not yet avalaible) -->
        </ion-item-group>

        <!-- Endorsement -->
        <ion-item-group *ngIf="badge && badge.endorsement">
            <ion-item-divider>
                <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap *ngIf="badge.endorsement.issuername">
                <h2>{{ 'addon.badges.issuername' | translate}}</h2>
                <p>{{ badge.endorsement.issuername }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.endorsement.issueremail">
                <h2>{{ 'addon.badges.issueremail' | translate}}</h2>
                <p><a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no">
                    {{ badge.endorsement.issueremail }}
                </a></p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.endorsement.issuerurl">
                <h2>{{ 'addon.badges.issuerurl' | translate}}</h2>
                <p><a [href]="badge.endorsement.issuerurl" core-link auto-login="no">
                    {{ badge.endorsement.issuerurl }}
                </a></p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.endorsement.dateissued">
                <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
                <p>{{ badge.endorsement.dateissued * 1000 | coreFormatDate }}</p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.endorsement.claimid">
                <h2>{{ 'addon.badges.claimid' | translate}}</h2>
                <p><a [href]="badge.endorsement.claimid" core-link auto-login="no">
                    {{ badge.endorsement.claimid }}
                </a></p>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.endorsement.claimcomment">
                <h2>{{ 'addon.badges.claimcomment' | translate}}</h2>
                <p>{{ badge.endorsement.claimcomment }}</p>
            </ion-item>
        </ion-item-group>

        <!-- Related badges -->
        <ion-item-group *ngIf="badge && badge.relatedbadges">
            <ion-item-divider>
                <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
            </ion-item-divider>
            <ion-item text-wrap *ngFor="let relatedBadge of badge.relatedbadges">
                <h2>{{ relatedBadge.name }}</h2>
            </ion-item>
            <ion-item text-wrap *ngIf="badge.relatedbadges.length == 0">
                <h2>{{ 'addon.badges.norelated' | translate}}</h2>
            </ion-item>
        </ion-item-group>

        <!-- Competencies alignment -->
        <ion-item-group *ngIf="badge && badge.alignment">
            <ion-item-divider>
                <h2>{{ 'addon.badges.alignment' | translate}}</h2>
            </ion-item-divider>
            <a ion-item text-wrap *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link auto-login="no">
                <h2>{{ alignment.targetname }}</h2>
            </a>
            <ion-item text-wrap *ngIf="badge.alignment.length == 0">
                <h2>{{ 'addon.badges.noalignment' | translate}}</h2>
            </ion-item>
        </ion-item-group>
    </core-loading>
</ion-content>
